<template>
  <el-collapse v-model="activeCollapse">
    <el-collapse-item title="基本信息" name="0">
      <el-form-item :label="isProcess ? $t('panel.processName') : $t('panel.nodeName')">
        <el-input v-model="elementName" @change="updateElementName"></el-input>
      </el-form-item>

      <el-form-item :label="isProcess ? $t('panel.processId') : $t('panel.nodeId')">
        <el-input v-model="elementId" @change="updateElementId"></el-input>
      </el-form-item>

      <el-form-item :label="$t('panel.documentationBody')">
        <el-input v-model="elementDocument" @change="updateElementDoc"></el-input>
      </el-form-item>

      <template v-if="isProcess">
        <el-form-item :label="$t('panel.executable')">
          <el-switch v-model="elementExecutable" @change="updateElementExecutable"></el-switch>
        </el-form-item>
      </template>

      <template v-if="isStartEvent">
        <el-form-item :label="$t('panel.initiator')">
          <el-input v-model="elementInitiator" @change="updateElementInitiator"></el-input>
        </el-form-item>
      </template>

      <template v-if="isUserTask">
        <element-basic-assign-info></element-basic-assign-info>
      </template>

      <template v-if="isGateway || isSubProcess || isServiceTask">
        <element-basic-gateway-info></element-basic-gateway-info>
      </template>

      <template v-if="isCondition">
        <element-basic-condition-info></element-basic-condition-info>
      </template>

      <template v-if="isCallActivity">
        <element-basic-call-activity-info></element-basic-call-activity-info>
      </template>
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { mapState } from 'pinia';
import modelerStore from '@wf/components/bpmnjs/store/modeler';
import { Element } from 'diagram-js/lib/model/Types';
import { getNameValue, setNameValue } from '@wf/components/bpmnjs/bo-utils/nameUtil';
import { setIdValue } from '@wf/components/bpmnjs/bo-utils/idUtil';
import { getProcessExecutable, setProcessExecutable, setProcessVersionTag } from '@wf/components/bpmnjs/bo-utils/processUtil';
import { getDocumentValue, setDocumentValue } from '@wf/components/bpmnjs/bo-utils/documentationUtil';
import { getInitiatorValue, setInitiatorValue } from '@wf/components/bpmnjs/bo-utils/initiatorUtil';
// import { isConditionalSource } from '@wf/components/bpmnjs/bo-utils/conditionUtil';
import EventEmitter from '@wf/components/bpmnjs/utils/EventEmitter';
import ElementBasicAssignInfo from './ElementBasicAssignInfo.vue';
import ElementBasicGatewayInfo from './ElementBasicGatewayInfo.vue';
import ElementBasicConditionInfo from './ElementBasicConditionInfo.vue';
import ElementBasicCallActivityInfo from './ElementBasicCallActivityInfo.vue';

export default defineComponent({
  name: 'ElementBasicInfo',
  components: { ElementBasicAssignInfo, ElementBasicGatewayInfo, ElementBasicConditionInfo, ElementBasicCallActivityInfo },
  data() {
    return {
      elementId: '',
      elementName: '',
      // elementVersion: '',
      elementDocument: '',
      elementExecutable: true,
      elementInitiator: '',
      isProcess: false,
      isStartEvent: false,
      isUserTask: false,
      isGateway: false,
      isSubProcess: false,
      isCondition: false,
      isCallActivity: false,
      isServiceTask: false,
      activeCollapse: ['0']
    };
  },
  computed: {
    ...mapState(modelerStore, ['getActive', 'getActiveId'])
  },
  mounted() {
    this.reloadGenerationData();
    EventEmitter.on('element-update', this.reloadGenerationData);
  },
  methods: {
    reloadGenerationData() {
      this.isProcess = !!this.getActive && this.getActive.type === 'bpmn:Process';
      this.isStartEvent = !!this.getActive && this.getActive.type === 'bpmn:StartEvent';
      this.isUserTask = !!this.getActive && this.getActive.type === 'bpmn:UserTask';
      this.isGateway = !!this.getActive && this.getActive.type.includes('Gateway');
      this.isCondition = !!this.getActive && this.getActive.type === 'bpmn:SequenceFlow';
      this.isSubProcess = !!this.getActive && (this.getActive.type === 'bpmn:SubProcess' || this.getActive.type === 'bpmn:Transaction');
      this.isCallActivity = !!this.getActive && this.getActive.type === 'bpmn:CallActivity';
      this.isServiceTask = !!this.getActive && this.getActive.type === 'bpmn:ServiceTask';
      this.elementId = this.getActiveId as string;
      this.elementName = getNameValue(this.getActive as Element) || '';
      this.elementDocument = getDocumentValue(this.getActive as Element) || '';
      this.elementInitiator = getInitiatorValue(this.getActive as Element) || '';
      if (this.isProcess) {
        this.elementExecutable = getProcessExecutable(this.getActive as Element);
      }
    },
    updateElementName(value: string) {
      setNameValue(this.getActive as Element, value);
    },
    updateElementId(value: string) {
      setIdValue(this.getActive as Element, value);
    },
    updateElementExecutable(value: boolean) {
      setProcessExecutable(this.getActive as Element, value);
    },
    updateElementDoc(value: string) {
      setDocumentValue(this.getActive as Element, value);
    },
    updateElementInitiator(value: string) {
      setInitiatorValue(this.getActive as Element, value);
    }
  }
});
</script>
